<template lang="pug">
.wrapper
  .top
  .login
    div(class='owl-login' :class="show?'password':''")
      .eyes
      .arm-up-right
      .arm-up-left
      .arm-down-left
      .arm-down-right
  .pad
    el-form(:model="formData" ref="form")
      el-form-item
        el-input(placeholder="Email" v-model='formData.username')
      el-form-item
        el-input(type="password" @focus="show = true" @blur="show = false" placeholder="password" v-model='formData.password')
      el-form-item
        .svg(v-html="data" @click="image")
        el-input(placeholder="验证码" v-model='formData.code')
  .active
    a Forgot password?
    a Sign Up
    el-button(type='primary' size="mini" @click="onLogin") Log In
</template>
<script>
export default {
  data() {
    return {
      show:false,
      formData:{
        username:'',
        password:'',
        code:''
      },
      data:''
    }
  },
  created() {
    this.datas()
  },
  methods: {
    datas() {
      this.axios.get('/captcha').then(({data}) => {
        console.log(data)
        this.data = data.data
      })
    },
    image() {
      this.datas()
    },
    onLogin() {
      console.log(this.formData)
      this.$refs.form.validate(v => {
        console.log(v);
        if(v) {
          this.axios.post('/login',{
            ...this.formData
          }).then(data => {
            console.log(data);
            this.$router.push('/main')
          })
        }
      })
    }
  },
}
</script>
<style lang="sass">
@import "../assets/style/animate.sass"
html,body
  height: 100%
.wrapper
  width: 100%
  height: 100%
  background: rgb(238, 238, 238)
  position: relative
  .top
    width: 100%
    height: 300px
    background: #018ef5
  .pad
    width: 338px
    padding: 30px
    border: 1px solid #ccc
    background: #fff
    margin: 0 auto
    .el-form-item__content
      display: flex
      align-items: center
  .active
    width: 338px
    margin: 0 auto
    border: 1px solid #ccc
    border-top: 1px solid transparent
    padding: 15px 30px
    display: flex
    justify-content: space-between
    align-content: center
    a
      font-size: 14px
      color: #ccc
      line-height: 28px
      cursor: pointer
</style>
